* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, sans-serif;
    background-color: #f5f7fa; /* 页面背景颜色 */
  }
  
  #app {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  :root {
    --header-height: 100px; // 头部高度
    --header-top-height: 60px; // 上半部分高度
    --header-bottom-height: 40px; // 下半部分高度
    --header-bg-color: #ffffff; // 头部背景色
    --border-color: #dcdfe6; // 分割线颜色（浅色模式）
    --footer-height: 40px; // 页脚高度
    --footer-bg-color: #1c71f1; // 页脚背景颜色
    --sidebar-width: 15%; // 左侧菜单宽度
    --sidebar-bg-color: #304156; // 左侧菜单背景颜色
  }

  /* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
  height: 8px; /* 滚动条高度（横向滚动条） */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景色 */
  border-radius: 4px; /* 轨道圆角 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #888; /* 滑块背景色 */
  border-radius: 4px; /* 滑块圆角 */
}

/* 滚动条滑块悬停效果 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滑块悬停时的背景色 */
}
  
  .footer {
    height: var(--footer-height);
    text-align: center;
    padding: 20px;
    background-color: var(--footer-bg-color);
  }